<%@ include file="common.jspf" %>
<%@ include file="header.jspf" %>
  
<div class="container">

	<div class="page-header">  		
  		<h3>Link <small>list</small></h3>
	</div>

   	<div class="btn-group" role="group" style="margin-bottom:20px;">
		<button id="btnCreate" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-pencil"></span> Create
		</button>
	</div>
	
	<div>  	
		<table id="tableLink" class="table table-striped table-hover">
			<thead>
				<tr>
					<th><c:out value="#" /></th>
					<th><spring:message code="label.category" text="Category"/></th>
					<th><spring:message code="label.name" text="Name"/></th>
					<th><spring:message code="label.url" text="URL"/></th>
					<th><spring:message code="label.hit" text="Hit"/></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</tfoot>
		</table>
	</div>	
		    
</div><!-- container -->

<script>
	$(function() {
		initTable();
		initEvents();
	});
	
	function initTable() {
		var table = $('#tableLink').DataTable({
			ajax: '${urlData}',
			columns: [
				{data: 'no'},
				{data: 'category', orderable: false},
				{
					data: 'title',
					render: function(data, type, full, meta) {
						      return '<span onclick="move(\'${urlDetail}?no=' + full.no + '\')">' + data + '</span>';
					}
				}, 
				{
					data: 'url',
					render: function(data, type, full, meta) {
						      return '<span onclick="linkAndCountUp(\'' + full.url + '\', \'' + full.no + '\')">' + data + '</span>';
					}
				},
				{data: 'hit'}
			],
			initComplete: function() {      
	            var i = 1;
			    var api = this.api();
			    var column = api.column(i);
                
                var select = $('<select><option value="">Category</option></select>');
                select.on('change', function() {
                        column.search(this.value).draw();
               	});
                select.appendTo($('#tableLink thead th').eq(i).empty());
 				
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="'+ d + '">' + d + '</option>');
                });
			}
		});
		
		/*
	    $('#tableLink tbody').on('click', 'tr', function() {
	    	var no = $('td', this).eq(0).text();
	    	location.href = '${urlDetail}?no=' + no; 
	    });
		*/
	    
		/*
	    $('#tableLink tbody').on('click', 'td:eq(3)', function() {
	    	link($(this).text());
	    	countUp($(this).prev().prev().prev());
	    });
		*/
	}
	
	function initEvents() {
		$('#btnCreate').click(function() {
			edit();
		});
	}
</script>

<%@ include file="footer.jspf" %>